<template>
  <div class="app-download">
    <!-- 成考 -->
    <!-- <h5
      v-if="isKF"
      class="tip"
    >
      消息实时提醒，<span
        class="download-btn"
        @click="showQRCode = true"
      >关注公众号</span>不迷路
    </h5> -->
    <h5
      class="tip"
    >
      更加系统的学习，快去<span
        class="download-btn"
        @click="navAppDownload"
      >下载APP</span>
    </h5>
    <!-- <div
      class="btn"
      @click="navAppDownload"
    >
      下载APP
    </div> -->
    <QrcodePop
      v-if="showQRCode"
      :code-img="require('assets/class/kf-qrcode.jpg')"
      code-txt="关注公众号"
      @hideQrcodePop="showQRCode = false"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    QrcodePop: () => import(/* webpackChunkName: "home" */ 'components/Home/QrcodePop.vue'),
  },
  data () {
    return {
      isKF: this.$store.state.instInfo.TrainingInstitutionId === 268,
      showQRCode: false,
    }
  },
  methods: {
    navAppDownload () {
      location.href = `http://${process.env.VUE_APP_FOR_TEST ? 'test' : ''}download.huikao8.cn/appdownload?id=${this.$store.state.instInfo.TrainingInstitutionId || ''}`
    },
    follow () {

    },
  },
})
</script>

<style lang="scss" scoped>
.app-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 92px;
  background-color: #fff;
  @include px1border;
}
.tip {
  font-size: 24px;
  color: #333;
}
.download-btn {
  font-size: 24px;
  color: $primary-web;
}
.btn {
  height: 52px;
  width: 130px;
  font-size: 24px;
  color: #ffffff;
  line-height: 52px;
  text-align: center;
  border-radius: 26px;
  background: $primary-web;
}
</style>
